<?php
session_start();
include_once 'recursos/config.php';
$conf = new configuracion();
$dominio = $conf->getG2uDominio()."/";
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <title> :: Gift 2 You :: <?=$_SESSION["g2uUserName"]?></title>
        
        <link rel="shortcut icon" type="image/ico" href="images/vineta-globo.png" />
        <link type="text/css" href="css/g2u.css" rel="stylesheet"  media="screen" />
        
        <!-- ALERTA INICIO -->
        <!--<link type="text/css" href="css/jquery-ui.css" rel="stylesheet"  media="screen" />-->
        <link type="text/css" href="<?=$dominio?>css/jquery-ui.css" rel="stylesheet"  media="screen" />
        <!-- ALERTA FIN -->
       

        <script lang="javascript" type="text/javascript" src="<?=$dominio?>js/jquery-1.9.1.js"></script>
        <script lang="javascript" type="text/javascript" src="js/g2u.js"></script>
        
        <!-- ALERTA INICIO -->
        <script lang="javascript" type="text/javascript" src="<?=$dominio?>js/jquery-ui.js"></script>
        <script src="js/floating.js" lang="javascript" type="text/javascript"></script>
        
        <style>
            .ui-datepicker .ui-datepicker-title select{
                font-size: 0.7em;
            }
            .ui-datepicker table{
                font-size: 0.7em;
            }
        </style>
        
    </head>
    <body>
        <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%; border-color: lightgray;" border="0">
            <tr>
                <td style="width: 20%; vertical-align: top;">
                    <div>
                        <center>
                            <img src="images/logo.png"/>
                        </center>
                    </div>

                    <div>
                        <center>
                            <img id="ppicPortal" src="<?=$dominio.$_SESSION["g2uProfilePic"]?>" />
                            <img src="images/png/salir.png" style="cursor: pointer;" onclick="logOut();"  width="18px" />
                            <br/>        
                            <?=$_SESSION["g2uFirstName"]?>
                        </center>
                    </div>
                    
                    <div id="menu">
                        <? include_once 'menu.php'; ?>
                    </div>
                    
                </td>
                <td style="width: 80%; vertical-align: top; padding-right: 50px; " >
                    <!--<div id="head">
                            <b></b>
                    </div>-->
                    <div id="fb-root"></div>
                    
                    <div id="contentBody">
                        
                        <div id="perfilHead">
                            Mi Perfil
                        </div>
                        
                        <div id="perfilBody">
                            <table id="tablePerfilBody" cellpadding="30px">
                                <tr>
                                    <td id="tablePerfilBodyPic" align="center">
                                        <img id="ppic" src="<?=$_SESSION["g2uProfilePic"]?>" />
                                    </td>
                                    <td>
                                        <table id="tablePerfilBodyContent" cellpadding="5px" width="100%;">
                                            <tr>
                                                <td colspan="2"><span id="userFullName"><?=$_SESSION["g2uFirstName"]." ".$_SESSION["g2uLastName"]?> </span></td>
                                            </tr>
                                            <tr>
                                                <td align="right">Facebook:</td>
                                                <td><span id="userFacebook"><?=$_SESSION["g2uFacebookProfileLink"]?></span></td>
                                            </tr>
                                            <tr>
                                                <td align="right">Usuario:</td>
                                                <td>
                                                    <span id="userName">
                                                        <?=$_SESSION["g2uSystemName"]?>
                                                        <img src="images/png/edit.png" width="12px" rel="editUserName" id="editUserName" class="btnEdit" /> 
                                                    </span>
                                                    <span id="userNameEdition" style="display: none;">
                                                        <input type="text" value="<?=$_SESSION["g2uSystemName"]?>" name="uname" id="uname" size="40" />
                                                        <img src="images/png/save.png" width="12px" rel="saveUserName" id="saveUserName"  class="btnEdit" /> 
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right">Correo:</td>
                                                <td>
                                                    <span id="userMail">
                                                        <?=$_SESSION["g2uMail"]?> 
                                                        <img src="images/png/edit.png" width="12px" rel="editUserMail" id="editUserMail" class="btnEdit" /> 
                                                    </span>
                                                    <span id="userMailEdition" style="display: none;">
                                                        <input type="text" value="<?=$_SESSION["g2uMail"]?>" name="umail" id="umail" size="40" />
                                                        <img src="images/png/save.png" width="12px" rel="saveUserMail" id="saveUserMail"  class="btnEdit" /> 
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right">Cumplea&ntilde;os:</td>
                                                <td>
                                                    <span id="userBirth">
                                                        <?=$_SESSION["g2uBirthday"]?>
                                                        <img src="images/png/edit.png" width="12px" rel="editUserBirth" id="editUserBirth" class="btnEdit" /> 
                                                    </span>
                                                    <span id="userBirthEdition" style="display: none;">
                                                        <input type="text" value="<?=$_SESSION["g2uBirthday"]?>" name="ubirth" id="ubirth" />
                                                        <img src="images/png/save.png" width="12px" rel="saveUserBirth" id="saveUserBirth"  class="btnEdit" /> 
                                                    </span>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        
                    </div>
                </td>
            </tr>
        </table>
        <script>
            
            $( "#ubirth" ).datepicker({ 
                dateFormat: "dd-mm-yy", 
                changeMonth: true,
                changeYear: true,
                maxDate: "+1D"});
            
        $("img").click(function(){
            rel = $(this).attr("rel");
            
            switch(rel){
                /** MAIL **/
                case "editUserMail":
                    $("#userMail").fadeOut('fast',function(){
                        $("#userMailEdition").fadeIn();
                        $("#umail").focus();
                    });
                    break;
                case "saveUserMail":
                    var field = 'mail';
                    var val= $("#umail").val();
                    $.post( "saveUserData/"+field+"/"+val+"" , function(data){
                        alerta = data;
                        indicador = alerta.substring(0,1);
                        alert(alerta.substring(1, alerta.length));

                        if(indicador==1){
                            $("#userMail").html($("#umail").val());
                            $("#userMailEdition").fadeOut('fast',function(){
                                $("#userMail").fadeIn();
                            });
                        }
                    });
                    break;
                /** BIRTH **/
                case "editUserBirth":
                    $("#userBirth").fadeOut('fast',function(){
                        $("#userBirthEdition").fadeIn();
                        $("#ubirth").focus();
                    });
                    break;
                case "saveUserBirth":
                    var field = 'birth';
                    var val= $("#ubirth").val();
                    $.post( "saveUserData/"+field+"/"+val+"" , function(data){
                        alerta = data;
                        indicador = alerta.substring(0,1);
                        alert(alerta.substring(1, alerta.length));

                        if(indicador==1){
                            $("#userBirth").html($("#ubirth").val());
                            $("#userBirthEdition").fadeOut('fast',function(){
                                $("#userBirth").fadeIn();
                            });
                        }
                    });
                    break;
                
                /** USERNAME **/
                case "editUserName":
                    $("#userName").fadeOut('fast',function(){
                        $("#userNameEdition").fadeIn();
                        $("#uname").focus();
                    });
                    break;
                case "saveUserName":
                    var field = 'user_name';
                    var val= $("#uname").val();
                    $.post( "saveUserData/"+field+"/"+val+"" , function(data){
                        alerta = data;
                        indicador = alerta.substring(0,1);
                        alert(alerta.substring(1, alerta.length));

                        if(indicador==1){
                            $("#userName").html($("#uname").val());
                            $("#userNameEdition").fadeOut('fast',function(){
                                $("#userName").fadeIn();
                            });
                        }
                    });
                    break;
            }

        });
        </script>
    </body>
</html>